<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link rel="stylesheet" href="../style/css/bootstrap.min.css">
  <link rel="stylesheet" href="../style/css/common.css">
</head>

<body>
  <div class="container">
    <ul class="nav nav-tabs mb20">
      <li class="active"><a href="index.html">检测人脸</a></li>
      <li><a href="compareCode.html">相似度比较</a></li>
      <li><a href="centerFace.html">检测最中心人脸</a></li>
      <li><a href="addFeature.html">添加特征码</a></li>
      <li><a href="../jQuery/index.html" target="_blank">切换版本</a></li>
      <li><a href="../index.html">返回首页</a></li>
    </ul>
    <div class="div-upload">
      <div class="div-btn">
        <button type="button" class="btn btn-default btn-blue">点击上传</button>
        <button type="button" class="btn btn-default btn-blue submit">点击检测</button>
        <button type="button" class="btn btn-default closeBtn">隐藏五官坐标</button>
      </div>
      <div class="tips">
        <p>调用的接口：detectFace</p>
        <p>接口参数：imgBlob</p>
        <p>参数解析：图片的二进制流文件</p>
        <p>举例：client.detectFace(imgBlob, function (data) {})</p>
        <p class="txtDiv none">检测耗时：<span class="txtTime" style="color: #409eff;">0</span>秒</p>
        <p class="txtDiv none" style="color: #409eff;">检测成功，鼠标经过人脸框，可查看返回详细信息</p>
      </div>
      <input type="file" onchange="previewImage(this),hideBtn()" id="photoimg" class="btn-file" />
      <div class="preview" id="preview"><img src="" alt="" /></div>
    </div>
    <!-- 提示语 -->
    <div class="box">
      <div class="msg">提示成功</div>
    </div>
  </div>
  <script src="../style/js/jquery.min.js"></script>
  <script src="js/thrift.js"></script>
  <script src="js/FaceApi.js"></script>
  <script src="js/FaceApi_types.js"></script>
  <script src="js/common.js"></script>
  <script src="js/preview.js"></script>
  <script>
    // 重新点击上传图片时，隐藏按钮
    function hideBtn() {
      isOk = true;
      $('.closeBtn').text('隐藏五官坐标');
      $('.closeBtn').hide();
    }


    // 提交对比
    $('.submit').click(function () {
      isOk = true;
      $('.closeBtn').text('隐藏五官坐标');
      
      var imgViewWid = $('.preview img').width();
      var imgViewHei = $('.preview img').height();
      // 开始时间
      var startTime = new Date().getTime();

      // 调用 detectFace 接口方法
      client.detectFace(imgBlob, function (data) {
        if(data.length){
          // 结束时间
          var endTime = new Date().getTime();
          var textTime = (endTime - startTime) / 1000;
          $('.txtDiv').show();
          $('.txtTime').text(textTime);
          
          for (var i = 0; i < data.length; i++) {
            var local = data[i].pos;
            var preceWid = imgViewWid / imgNatWid;
            var preceHei = imgViewHei / imgNatHei;


            //JSON字符串话返回的数据并显示 
            var angle = JSON.stringify(data[i].angle);
            var ei = JSON.stringify(data[i].ei);
            var mouth = JSON.stringify(data[i].mouth);
            var nose = JSON.stringify(data[i].nose);
            var pos = JSON.stringify(data[i].pos);
            var tips = '<div class="tips-hover tips"><p>angle:' + angle +'</p><p>ei:' + ei +'</p><p>mouth:' + mouth +'</p><p>nose:' + nose +'</p><p>pos:' + pos +'</p></div> ';
            
            var html = '<div class="drawDiv" style="left:' + local.left * preceWid + 'px;top:' + local.top * preceHei + 'px;width:' + local.width * preceWid + 'px;height:' + local.height * preceHei + 'px;">'+ tips+'</div>'
            
            // 鼻子坐标
            var noseLe = Number(data[i].nose.x * preceWid) - Number(8);
            var noseTo = Number(data[i].nose.y * preceHei) - Number(8);
            var noseHtml = '<div class="otherPos" style="left:'+ noseLe +'px;top:'+ noseTo +'px"></div>'

            // 嘴巴坐标
            var mouthLe = Number(data[i].mouth.x * preceWid) - Number(8);
            var mouthTo = Number(data[i].mouth.y * preceHei) - Number(8);
            var mouthHtml = '<div class="otherPos" style="left:'+mouthLe+'px; top:'+mouthTo+'px"></div>'

            // 左眼睛坐标
            var eyeLe = Number(data[i].ei.leftx * preceWid) - Number(8);
            var eyeTo = Number(data[i].ei.lefty * preceHei) - Number(8);
            var eyeLeftHtml = '<div class="otherPos" style="left:' + eyeLe + 'px; top:' + eyeTo + 'px"></div>'
            // 右眼睛坐标
            var eyeRiLe = Number(data[i].ei.rightx * preceWid) - Number(8);
            var eyeRiTo = Number(data[i].ei.righty * preceHei) - Number(8);
            var eyeRiHtml = '<div class="otherPos" style="left:' + eyeRiLe + 'px; top:' + eyeRiTo + 'px"></div>'

            $('.preview').append(html, noseHtml, mouthHtml, eyeLeftHtml, eyeRiHtml);
            $('.closeBtn').show();
          }
        }else{
          $('.box').show().delay(3000).fadeOut();
          $('.box').find('.msg').text('请提交人脸照片');
        }
      }).fail(function (jqXHR, status, error) {
        $('.box').show().delay(3000).fadeOut();
        $('.box').find('.msg').text(status + ":" + error);
      })
    })


    // 显示/关闭五官位置的显示
    var isOk = true;
    $('.closeBtn').click(function () {
      if (isOk) {
        $('.preview').find('.otherPos').hide();
        $(this).text('显示五官坐标');
        isOk = false;
      } else {
        $('.preview').find('.otherPos').show();
        $(this).text('隐藏五官坐标');
        isOk = true;
      }
    })


    $('.preview').on('mouseenter', ".drawDiv", function () {
      $(this).children().show();
    }).on('mouseleave','.drawDiv',function(){
      $(this).children().hide()
    })
  </script>
</body>
</html>